<template>
	<view class="page">
		<navbar></navbar>
		<banner :img-list="bannerList" url-key="url" @selected="selectedBanner"></banner>
		<imgCube :imgCubeList="imgCubeList" @toNavigate="toNavigate"></imgCube>
		<grid></grid>
		<recommend></recommend>
		<program></program>
		<bill></bill>
		<bottom type="cosmetology" :tabIndex="0"></bottom>
	</view>
</template>

<script setup lang="ts">
	//引入
	import navbar from '@/components/cosmetology/tabbar/index/navbar/navbar.vue';
	import banner from '@/components/cosmetology/tabbar/index/banner/banner.vue';
	import imgCube from '@/components/cosmetology/tabbar/index/cube/cube.vue';
	import grid from '@/components/cosmetology/tabbar/index/grid/grid.vue';
	import recommend from '@/components/cosmetology/tabbar/index/recommend/recommend.vue';
	import program from '@/components/cosmetology/tabbar/index/program/program.vue';
	import bill from '@/components/cosmetology/tabbar/index/bill/bill.vue';
	import bottom from '@/components/footer/footer.vue';
	import { ref } from 'vue';
	//数据
	const bannerList = ref([{
                    url: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
                    id: 1
                },{
                    url: 'https://img0.baidu.com/it/u=3001422767,55637664&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=791',
                    id: 2
                },{
                    url: 'https://img0.baidu.com/it/u=1385079478,4019721997&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                    id: 3
                }]);
	const imgCubeList = ref([{
		imgUrls:[
			//图片列表
		    'https://img2.baidu.com/it/u=2674290768,690533875&fm=253&fmt=auto&app=138&f=JPEG?w=698&h=500',
		    'https://img2.baidu.com/it/u=3387071419,3538122008&fm=253&fmt=auto&app=120&f=JPEG?w=521&h=500',
		    'https://img0.baidu.com/it/u=3585829849,3593988488&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625',
			'https://img1.baidu.com/it/u=4050089115,28994261&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
		],
		cubeStyle:'style1',//样式
		cubeTitle:'',//主标题
		cubeSubTitle:''//副标题
	}])
	//函数方法
	const selectedBanner = (item,index) => {
		console.log('🥒', item, index)
	}
	const toNavigate = () => {
		
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: $uni-bg-color-grey;
	}
</style>